<template>
  <div class="login">
    <div class="login-box">
      <div class="item">
        <input v-model="form.username" type="text" placeholder="请输入账号" />
      </div>
      <div class="item">
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          show-password
        ></el-input>
      </div>
      <div class="item captcha-box">
        <input
          @keyup.enter="clickLogin"
          type="text"
          placeholder="请输入验证码"
          v-model="form.captcha"
        />
        <span class="captcha">
          <img src="../../assets/logo.png" alt="验证码" />
        </span>
      </div>
      <div class="login-btn" @click="clickLogin">登 录</div>
    </div>
  </div>
</template>
<script>
import cookies from "@/utils/cookies";
export default {
  props: {},
  data() {
    return {
      form: {
        username: "",
        password: "",
        captcha: "",
      },
    };
  },
  mounted() {},
  methods: {
    clickLogin() {
      if (this.form.password === "" || this.form.username === "") {
        return this.$message.warning("请输入账号密码！");
      }

      const regexp = /^[0-9]{4}$/;

      if (!regexp.test(this.form.captcha)) {
        return this.$message.warning("验证码输入错误！");
      }

      if (this.form.password === "123456" && this.form.username === "admin") {
        //设置token
        cookies.setToken(this.form.username);
        cookies.setCookies('current_user',this.form.username);
        // 发起请求
        this.$router.push("/home");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../../assets/login/login-bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 400px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    .item {
      width: 100%;
      height: 58px;
      border-bottom: 1px solid #fff;
      input {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        background-color: transparent;
        font-size: 20px;
        outline: none;
        color: #f5f0f0;
      }
      ::v-deep .el-input {
        width: 100%;
        height: 100%;
        color: #f5f0f0;
        input {
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
          border: 0;
          background-color: transparent;
          font-size: 20px;
          outline: none;
          color: #f5f0f0;
        }
      }
    }
    .captcha-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      input {
        width: 310px;
        vertical-align: middle;
      }
      .captcha {
        cursor: pointer;
        display: inline-block;
        width: 120px;
        height: 40px;
        background-color: #fff;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .login-btn {
      cursor: pointer;
      margin-top: 40px;
      height: 60px;
      width: 100%;
      font-size: 20px;
      color: #fff;
      line-height: 60px;
      text-align: center;
      background: linear-gradient(
        90deg,
        #2192b8 0%,
        rgba(33, 146, 184, 0.5) 50%,
        #2192b8 100%
      );
    }
  }
}
</style>
